<!DOCTYPE html>
<html>
<head lang="utf-8">
    <meta charset="UTF-8">
    <title>teacher_{{roomID}}</title>
    <style>
        * {
            font-family: "微软雅黑";
        }

        html, body {
            height: 100%;
        }

        #content { /* this is the div you want to fill the window */
            min-height: 100%;
        }

        * html #content {
            height: 100%
        }

        .content {
            width: 100%;
            height: 100%;
            margin: auto;
        }

        .chatTitle {
            width: 100%;
            height: 5%;
            text-align: center;
            background-color: #b1a8a8;
        }

        .chatTitle .title {
            font-size: 1.5em;
        }

        .chatArea {
            width: 100%;
            height: 95%;
        }

        .userListOnline {
            width: 25%;
            height: 95%;
            float: left;
            overflow-y: auto;
            background-color: #ccccd2;
        }

        .txtArea {
            width: 75%;
            height: 95%;
            float: left;
            background-color: #f8f8f8;
        }

        .msgArea {
            width: 100%;
            height: 90%;
            overflow-y: auto;
            border-bottom: 1px solid #9d9898;
        }

        .sendArea {
            width: 100%;
            height: 5%;
        }

        .msg {
            width: 100%;
        }

        .name_msg .uname {
            font-weight: bold;
        }

        .data_msg {
            margin-left: 5%;
            background-color: #e0e3e6;
            border-radius: 8px;
            padding: 3px;
        }

        ul {
            margin-left: 20%;
        }

        ul li {
            list-style-type: none;
        }

        .sysMsg {
            color: #c1bfbf;
            padding-right: 5px;
            padding-left: 5px;
            font-size: 14px;
        }

    </style>
</head>
<body>
<div class="content" id="content">
    <div class="chatTitle" id="chattitle">
        <!--<button id="joinOrLeave">退出房间</button>-->
        <button id="talkOrShutup">禁言</button>
    </div>
    <div class="chatArea well">
        <div class="userListOnline">
            当前在线学生人数: <span id="count">{{users.length}}</span> <br/>
            <div id="userListOnline"></div>
        </div>

        <div class="txtArea" id="txtArea">
            <div class="msgArea" id="msgArea"></div>
            <div class="sendArea">
                <table style="width: 100%">
                    <tr>
                        <td style="display: none;"><input id="name"
                                                          class="input-xlarge" type="text"
                                                          value="${actionBean.currentUser.userName}"
                                                          style="display: none;"/></td>
                        <td width="90%">
                            <input id="messageInput" class="msg" type="text" placeholder="发送内容..." maxlength="200"/>
                        </td>
                        <td style="text-align: center;">
                            <button id="sendMessage" class="weui_btn weui_btn_mini weui_btn_primary send" id="send">发送
                            </button>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div style="clear: both;"></div>
    </div>
</div>

<script src="/socket.io/socket.io.js"></script>
<script src="/js/jquery.js"></script>
<script>
    $(function () {
        // ----------设置昵称-------------
        var userName = '';
        var userId = '';
        var isfrom = '';


        //处理url参数
        function GetUrlPara() {
            var url = document.location.toString();
            var arrUrl = url.split("/");
            var roomId = arrUrl[arrUrl.length - 1];
            var userInfoArrs = arrUrl[arrUrl.length - 2];
            var userInfos = userInfoArrs.split("&");
            userId = userInfos[0];
            userName = userInfos[1];
            isfrom = userInfos[2];
            userName = decodeURI(userName)

            if (isfrom == undefined) {
                isfrom = 'w'
            }

            console.log('url=' + url)
            console.log(arrUrl)
            console.log(roomId + '' + userInfoArrs)
            console.log('老师：' + userName + '，id=' + userId + '  进入房间：' + roomId)
        }

        // ---------创建连接-----------
        var socket = io();


        GetUrlPara();

        // 加入房间
        socket.on('connect', function () {
            console.log('connection 中的username=' + userName)
            var data = {
                userName: userName,
                userId: userId,
                isfrom: isfrom
            }
            socket.emit('join', data);
        });


        // 监听消息
        socket.on('msg', function (user, msg) {

            var element = '<div class="message">' +
                    '     <div class="name_msg">' +
                    '		<span class="uname">' + user.name + getdate() + '	</div>' +
                    '   <div class="data_msg">' + msg +
                    '	</div>' + '</div>';
            $('#msgArea').append(element);
            // 滚动条保持最下方
            $('#msgArea').scrollTop($('#msgArea')[0].scrollHeight);
        });

        // 监听系统消息
        socket.on('sys', function (sysMsg, users) {
            var message = '<div class="sysMsg">' + sysMsg + '</div>';
            $('#msgArea').append(message);
            $('#count').text(users.length);

            var userListHtml = '<div>' +
                    '<ul>';
            users.forEach(function (user, index, array) {
                if (user.userId != userId) {
                    var imagePage = '';
                    if (user.isfrom == 'a') {
                        imagePage = '<img alt="NoImg" src="/image/android.png" width="25px" height="25px">'
                    } else if (user.isfrom == 'i') {
                        imagePage = '<img alt="NoImg" src="/image/ios.png" width="25px" height="25px">'
                    } else if (user.isfrom == 'wc') {
                        imagePage = '<img alt="NoImg" src="/image/wx.png" width="25px" height="25px">'
                    } else if (user.isfrom == 'w') {
                        imagePage = '<img alt="NoImg" src="/image/wy.png" width="25px" height="25px">'
                    } else if (user.isfrom == 'p') {
                        imagePage = '<img alt="NoImg" src="/image/pad.png" width="25px" height="25px">'
                    }
                    userListHtml += '<li>' +
                            imagePage +
                            '<span class="uname">' + 'id: ' + user.userId + ' name:' + user.name + ' from: ' + user.isfrom + '</span>'
                    '</li>'
                }
            });
            userListHtml += '<ul><div>'
            $('#userListOnline').html(userListHtml);
        });


        socket.on('talk', function (msg) {
            $('#messageInput').removeAttr('disabled')
            $('#messageInput').attr('placeholder', '请输入聊天内容。。。')
        })

        socket.on('shutup', function (msg) {
            $('#messageInput').attr('disabled', 'disabled')
            $('#messageInput').attr('placeholder', '禁言中')
        })


        // 发送消息
        $('#messageInput').keydown(function (e) {
            if (e.which === 13) {
                e.preventDefault();
                var msg = $(this).val();
                if (msg.trim() == '') {
                    return false
                }
                $(this).val('');
                socket.send(msg);
            }
        });

        $('#sendMessage').click(function () {
            var msg = $('#messageInput').val();
            if (msg.trim() == '') {
                return false
            }
            $('#messageInput').val('');
            socket.send(msg);
        })

        // 退出房间
        $('#joinOrLeave').click(function () {
            if ($(this).text() === '退出房间') {
                $(this).text('进入房间');
                socket.emit('leave');
                var msg = '你已经退出了房间,重新发言请点击"进入房间"';
                $('#msgArea').append('<div class="sysMsg">' + msg + '</div>');
            } else {
                $(this).text('退出房间');
                socket.emit('join', userName);
            }
        });

        // 退出房间
        $('#talkOrShutup').click(function () {
            if ($(this).text() === '禁言') {
                $(this).text('聊天');
                socket.emit('shutup', userName);
            } else {
                $(this).text('禁言');
                socket.emit('talk', userName);
            }
        });
    });

    function getdate() {
        var date = new Date();
        var year = date.getFullYear(); //获取当前年份
        var mon = date.getMonth() + 1; //获取当前月份
        var da = date.getDate(); //获取当前日
        var day = date.getDay(); //获取当前星期几
        var h = date.getHours(); //获取小时
        var m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes(); //获取分钟
        var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds(); //获取秒

        return '<span class="sysMsg"> ' + mon + '-' + da + ' ' + h + ':' + m + ':' + s + '</span>';
    }

</script>
</body>
</html>